<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	</head>
	<style>
		*{
			padding: 0px;
			margin: 0px;
			border: 0px;
		}
		.all{
			width: 100%;
			height: 800px;
		}
		.leftbox{
			width: 20%;
			height: 800px;
			float: left;
		}
		.centerbox{
			width: 45%;
			height: 800px;
			float: left;
			background-color: gainsboro;
		}
		
		.rightbox{
			width: 35%;
			height: 800px;
			float: left;
		}
	
	</style>
	<body>
		<!--
        	描述：整体边框
        -->
        <div class="all">
        	<!--
            	描述：左边框
            -->
        	<div class="leftbox">
        		<div class="text-center">
        			<img src="img/shijing.png" class="img-thumbnail " width="150px" height="150px">
        		</div>
        		<div>
        			<ul class="list-group">
						<li class="list-group-item text-center"><button type="button" class="btn btn-default">我的收藏</button></li>
						<li class="list-group-item text-center"><button type="button" class="btn btn-default">我的信息</button></li>
						<li class="list-group-item text-center"><button type="button" class="btn btn-default">我的相册</button></li>
						<li class="list-group-item text-center"><button type="button" class="btn btn-default">我的好友</button></li>
						<li class="list-group-item text-center"><button type="button" class="btn btn-default">我的留言</button></li>
					</ul>
        		</div>
        		<div id="myCarousel" class="carousel slide">
					<!-- 轮播（Carousel）指标 -->
					<ol class="carousel-indicators">
						<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
						<li data-target="#myCarousel" data-slide-to="1"></li>
						<li data-target="#myCarousel" data-slide-to="2"></li>
					</ol>   
					<!-- 轮播（Carousel）项目 -->
					<div class="carousel-inner">
						<div class="item active">
							<img src="img/shijing.png" alt="First slide">
						</div>
						<div class="item">
							<img src="img/shijing.png" alt="Second slide">
						</div>
						<div class="item">
							<img src="img/shijing.png" alt="Third slide">
						</div>
					</div>
					<!-- 轮播（Carousel）导航 -->
					<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
						<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
						<span class="sr-only">Previous</span>
					</a>
					<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
						<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
						<span class="sr-only">Next</span>
					</a>
				</div> 
        		
        	</div>
        	<!--
            	描述：中间边框
            -->
            <div class="centerbox">
	            <div class="centerbox1 panel panel-default" >
	            		<div class="panel-body">
					        这是一个基本的面板
					    </div>
            	</div>
            	<div class="centerbox2">
            		<table class="table">
					   
					   <tbody>
				   		 <tr>
					      	 <td class="text-center"><button type="button" class="btn btn-default ">相&nbsp;&nbsp;&nbsp;&nbsp;册</button></td> 
					         <td>&nbsp;&nbsp;</td> 
					         <td>&nbsp;&nbsp;</td>
					         <td>&nbsp;&nbsp;</td>
					         <td>&nbsp;&nbsp;</td>
					         <td>&nbsp;&nbsp;</td> 
					      </tr>
					      <tr>
					      	 <td>&nbsp;&nbsp;</td> 
					         <td class="text-center"><button type="button" class="btn btn-default ">日&nbsp;&nbsp;&nbsp;&nbsp;记</button></td>
					         <td>&nbsp;&nbsp;</td> 
					         <td>&nbsp;&nbsp;</td>
					         <td>&nbsp;&nbsp;</td>
					         <td>&nbsp;&nbsp;</td>
					         <td>&nbsp;&nbsp;</td> 
					      </tr>
					     
					      <tr>
					      	 <td>&nbsp;&nbsp;</td> 
					         <td>&nbsp;&nbsp;</td> 
					         <td class="text-center"><button type="button" class="btn btn-default ">故&nbsp;&nbsp;&nbsp;&nbsp;事</button></td>
					         <td>&nbsp;&nbsp;</td>
					         <td>&nbsp;&nbsp;</td>
					         <td>&nbsp;&nbsp;</td> 
					      </tr>
					      <tr>
					      	 <td>&nbsp;&nbsp;</td> 
					         <td>&nbsp;&nbsp;</td> 
					         <td>&nbsp;&nbsp;</td>
					         <td class="text-center"><button type="button" class="btn btn-default ">写&nbsp;&nbsp;&nbsp;&nbsp;信</button></td>
					     	<td>&nbsp;&nbsp;</td>
					     	<td>&nbsp;&nbsp;</td> 
					      </tr>
					      <tr>
					      	 <td>&nbsp;&nbsp;</td> 
					         <td>&nbsp;&nbsp;</td> 
					         <td>&nbsp;&nbsp;</td>
					     	<td>&nbsp;&nbsp;</td>
					     	<td class="text-center"><button type="button" class="btn btn-default ">说&nbsp;&nbsp;&nbsp;&nbsp;说</button></td>
					      	<td>&nbsp;&nbsp;</td> 
					      </tr>
					      
					   </tbody>
					</table>
            	</div>
            	<div class="panel panel-default" >
	            		<div class="panel-body">
					        这是一个基本的面板
					    </div>
            	</div>
            	<div class="centerbox3">
            		<table class="table table-bordered">
						<caption>边框表格布局</caption>
						<thead>
							<tr>
								<th>名称</th>
								<th>城市</th>
								<th>邮编</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td><img src="img/shijing.png" class="img-thumbnail"></td>
								<td><img src="img/shijing.png" class="img-thumbnail"></td>
								<td><img src="img/shijing.png" class="img-thumbnail"></td>
							</tr>
							<tr>
								<td>Sachin</td>
								<td>Mumbai</td>
								<td>400003</td>
							</tr>
							<tr>
								<td>Uma</td>
								<td>Pune</td>
								<td>411027</td>
							</tr>
						</tbody>
					</table>
            	</div>
            </div>
            <!--
            	右边框
            -->
            <div class="rightbox">
            	<div>
            		<nav class="navbar navbar-default" role="navigation">
					  <div class="container-fluid">
					    <ul class="nav navbar-nav navbar-right">
					      <li><a href="#"><span class="glyphicon glyphicon-user"></span> 注册</a></li>
					      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
					    </ul>
					  </div>
					</nav>
            	</div>
            	<div class="panel panel-default" >
	            		<div class="panel-body">
					        这是一个基本的面板
					    </div>
					    <div class="panel-body">
					        这是一个基本的面板
					    </div>
					    <div class="panel-body">
					        这是一个基本的面板
					    </div>
					    
					    <div class="panel-body">
					        这是一个基本的面板
					    </div>
					    <div class="panel-body">
					        这是一个基本的面板
					    </div><div class="panel-body">
					        这是一个基本的面板
					    </div>
					    
					    <div class="panel-body">
					        这是一个基本的面板
					    </div><div class="panel-body">
					        这是一个基本的面板
					    </div>
					    <div class="panel-body">
					        这是一个基本的面板
					    </div>
					    
					    <div class="panel-body">
					        这是一个基本的面板
					    </div>
					    <div class="panel-body">
					        这是一个基本的面板
					    </div>
					    <div class="panel-body">
					        这是一个基本的面板
					    </div>
					    <div class="panel-body">
					        这是一个基本的面板
					    </div>
					    
					    <div class="panel-body">
					        这是一个基本的面板
					    </div>
            	</div>
            </div>
        </div>
	</body>
</html>
